/*
 * @Author: Zhang Kai
 * @Date: 2021-12-15 15:25:55
 * @LastEditors: mayijun
 * @LastEditTime: 2022-07-18 18:55:47
 * @FilePath: /metricsx-standard-ui/src/views/indexManage/dimension/components/SearchForm.tsx
 */
import { defineComponent, ref, reactive, onMounted } from 'vue';
import SearchForm from '@/components/SearchForm/index';
import PageFilter from '@/components/PageFilter/index';
import { ECustomColumn } from '@/utils/constants';
import API from '@/services';

const searchForm = defineComponent({
  name: 'SearchForm',
  props: {
    subjectList: {
      type: Array,
      default: () => []
    },
    dimensionTypeList: {
      type: Array,
      default: () => []
    }
  },
  emits: ['search'],
  setup(props, { slots, attrs, emit }) {
    const form = ref({});

    //筛选条件
    const pageFilter: any = ref([]);

    /* form实例 */
    const formRef: any = ref();

    const state = reactive({
      userList: [] as any[],
      dimensionClassList: [] as any[]
    });

    //获取选项数据
    const getSelectData = (keys: any) => {
      switch (keys) {
        case 2:
          return {
            list: props.dimensionTypeList,
            isRemote: false
          };
        case 3:
          return {
            list: props.subjectList,
            isRemote: false,
            fieldLabel: 'subjectName',
            fieldValue: 'id'
          };
        case 4:
          return {
            list: state.dimensionClassList,
            isRemote: false
          };
        case 5:
          return {
            list: state.userList,
            isRemote: true,
            remoteMethod: (name: string) => getUserList(name)
          };
        default:
          return;
      }
    };

    /* 维度类型枚举接口 */
    const getDimensionClassList = async () => {
      try {
        const { code, data } = await API.enumBao.getDimensionClass();
        if (code === 200 && Array.isArray(data)) {
          state.dimensionClassList = [...data];
        }
      } catch (error) {
        console.log(error);
      }
    };

    /* 获取用户 */
    const getUserList = async (name?: string) => {
      try {
        const { code, data } = await API.userInfoService.getUser({ name });
        if (code === 200 && Array.isArray(data)) {
          state.userList = data;
        }
      } catch (error) {
        console.log(error);
      }
    };

    /* 获取筛选条件 */
    const getPageFilter = async () => {
      try {
        const { code, data }: any = await API.userPageFilterSetting.getFindOne({
          pageCode: ECustomColumn?.dimensionmgmt
        });
        if (code === 200 && data) {
          let checkedArray: any[] = data.settings.filter((v: any) => v.isCheck);
          checkedArray.sort((a, b) => a.order - b.order);
          pageFilter.value = checkedArray;

          //初始化表单对象
          pageFilter.value.map((item: any) => {
            form.value[item.prop] = '';
          });
        }
      } catch (error) {
        console.log(error);
      }
    };

    onMounted(() => {
      getPageFilter();
      getDimensionClassList()
      getUserList()
    });

    return () => {
      return (
        <SearchForm
          num={4}
          onReset={() => {
            formRef.value.resetFields();
            emit('search',form.value);
          }}
          onSearch={() => emit('search', form.value)}
          model={form.value}
          formRef={formRef}
          isSearchBtn={false}
          labelWidth={'120px'}
          v-slots={{
            pageFilter: () => (
              <>
                {pageFilter.value.map((item: any) => {
                  return (
                    <el-form-item label={item.label + ':'} prop={item.prop}>
                      <PageFilter
                        searchForm={form.value}
                        pageSettings={item}
                        selectData={getSelectData(item.keys)}
                        onSearchForm={() => emit('search', form.value)}
                      ></PageFilter>
                    </el-form-item>
                  );
                })}
              </>
            )
          }}
        ></SearchForm>
      );
    };
  }
});
export default searchForm;
